<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>动漫海洋</title>
    <link
      rel="shortou icon"
      href="images/picture/881e8f9042c27e2453effee4c9cebb2f.gif"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="css/main-yu.css"
    />
    <link rel="stylesheet" type="text/css" href="css/buttons.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="images/button/css/font-awesome.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
      integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="banner">
      <ul></ul>
      <ol></ol>
      <i class="left"></i><i class="right"></i>
    </div>
    <div class="body">
      <div class="top" id="test">
        <!-- 顶部菜单 -->
        <div class="top-first">
          <!-- 视频搜索框 -->
          <form action="https://www.bilibili.com/search" target="_blank">
            <!-- 连接到B站搜索 -->
            <input
              type="text"
              name="keyword"
              class="shurukuang"
              class="search-keyword"
            />
            <input type="submit" value="" class="sousuoanniu" />
          </form>
        </div>
        <div class="menu">
          <ul>
            <input
              type="button"
              class="yindaolan"
              id="a"
              value="看番去处"
              onclick="click_1()"
            />
            <input
              type="button"
              class="yindaolan"
              id="b"
              value="经典作品"
              onclick="click_2()"
            />
            <input
              type="button"
              class="yindaolan"
              id="c"
              value="国漫精品"
              onclick="click_3()"
            />
            <input
              type="button"
              class="yindaolan"
              id="d"
              value="新番推荐"
              onclick="click_4()"
            />
            <input
              type="button"
              class="yindaolan"
              id="e"
              value="更多内容"
              onclick="click_5()"
            />
            <button
              class="button button-circle button-tiny"
              style="top: -2.5px; position: relative; left: 5px;"
              onclick="click_top()"
            >
              <i class="far fa-arrow-alt-circle-up"></i>
            </button>
          </ul>
        </div>
        <div class="back">
          <!-- 返回主页的按钮 -->
          <a href="checkJump.html"
            ><button
              class="button button-large button-plain button-border button-circle"
            >
              <i class="fa fa-reply"></i></button
          ></a>
        </div>
      </div>
      <!-- b站介绍 -->
      <div class="first" id="1">
        <a href="https://www.bilibili.com/" target="_blank">
          <div class="first-1">
            <img
              src="images/picture/BILIBILI.png"
              alt="B站"
              width="100%"
              height="100%"
            />
          </div>
        </a>
        <div class="first-2">
          <p>
            哔哩哔哩（bilibili）现为国内领先的年轻人文化社区，
            该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”，
            根据数据公司QuestMobile发布的《移动互联网 2017 年Q2 夏季报告》，
            B站位列24岁及以下年轻用户偏爱的十大APP榜首，同时，在百度发布的
            2016热搜榜中，B站在00后十大新鲜关注APP中排名第一。B站在2017年
            3月成立了‘国创’（国产原创）专区，致力于国产原创动画的推广与生态
            维护。截止2018年4月，国产原创动画播放量累计达到18亿
          </p>
        </div>
        <div class="first-3">
          <img
            src="images/picture/881e8f9042c27e2453effee4c9cebb2f.gif"
            alt=""
          />
        </div>
        <div class="first-4">
          <p>
            B站中看視頻加载时出现的小电视， 以表示视频正在努力加载中。
            听说小电视抖一百下会爆炸哟
          </p>
        </div>
        <div class="first-5">
          <div class="first-5-1"><p>其他去处</p></div>
          <div class="first-5-2">
            <div class="first-5-3">
              <img src="images/picture/aiqiyi.jpg" alt="" />
              <a href="https://www.iqiyi.com/?vfm=m_303_qqll" target="_blank">
                <div class="mask"><p>点击跳转</p></div>
              </a>
            </div>
            <div class="first-5-4">
              <img src="images/picture/tengxunshipin.jpg" alt="" />
              <a href="https://v.qq.com/?ptag=qqbsc" target="_blank">
                <div class="mask"><p>点击跳转</p></div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="second" id="2">
        <div class="second-left">
          <a
            href="http://list.youku.com/show/id_zcc001f06962411de83b1.html?tpa=dW5pb25faWQ9MTAzNzUzXzEwMDAwMV8wMV8wMQ&refer=baiduald1705"
            target="_blank"
          >
            <div class="second-1">
              <img src="images/picture/7e77742c2e5c18cd092253dc0d76e372.jpg" />
            </div>
          </a>
          <div class="second-2">
            <div class="second-2-1">
              <p>
                有多少家长认为动漫只是孩童的专属，
                但只有自己了解后，在能懂不同世界中
                的喜怒哀乐————致反对动漫的家长们
              </p>
            </div>
            <div class="second-2-2">
              <p>我们一同重温我们与他们一同哭过笑过的时光</p>
            </div>
            <a
              href="https://www.bilibili.com/bangumi/play/ep118478"
              target="_blank"
            >
              <div class="second-2-3">
                <img
                  src="images/picture/20150605183403_eiu2w.jpeg"
                  alt="未闻花名"
                />
                <p>未闻花名</p>
              </div>
            </a>
            <a
              href="https://www.bilibili.com/bangumi/play/ss3423?from=search&seid=14893466165700571141"
              target="_blank"
            >
              <div class="second-2-4">
                <img
                  src="images/picture/o_1co7nr6jpuvq1rm4ira1e5b1ht010.jpg"
                  alt="四月是你的谎言"
                />
                <p>四月是你的谎言</p>
              </div>
            </a>
          </div>
          <div class="second-3">
            <div class="second-menu"><p>更多作品</p></div>
            <li></li>
            <a href="http://www.dilidili.wang/anime/bleach/" target="_blank">
              <li>死神</li>
            </a>
            <a
              href="http://www.iqiyi.com/a_19rrhb1b0h.html?vfm=2008_aldbd"
              target="_blank"
            >
              <li>龙珠</li>
            </a>
            <a
              href="http://v.pptv.com/page/aNeyMJjibbqwPjVE.html?rcc_id=baiduchuisou"
              target="_blank"
            >
              <li>高达</li>
            </a>
            <a
              href="http://www.iqiyi.com/a_19rrk0tzb1.html?vfm=2008_aldbd"
              target="_blank"
            >
              <li>中华小当家</li>
            </a>
            <a
              href="http://www.iqiyi.com/a_19rrh7tk9x.html?vfm=2008_aldbd"
              target="_blank"
            >
              <li>四驱兄弟</li>
            </a>
            <a
              href="http://www.iqiyi.com/a_19rrhbp78p.html?vfm=2008_aldbd"
              target="_blank"
            >
              <li>妖精的尾巴</li>
            </a>
            <a
              href="https://www.bilibili.com/anime/index/#season_version=-1&area=-1&is_finish=-1&copyright=-1&season_status=-1&season_month=-1&pub_date=-1&style_id=21&order=3&st=1&sort=0&page=1"
              target="_blank"
            >
              <li>更多</li>
            </a>
          </div>
        </div>
        <div class="second-bottom">
          <a href="https://www.iqiyi.com/v_19rr7p4m3k.html" target="_blank">
            <div class="second-bottom-1">
              <img
                src="images/picture/9eaf806162bd0962c7b1fb8912d96e7c.jpeg"
                alt="你的名字"
              />
            </div>
          </a>
          <a
            href="https://www.bilibili.com/bangumi/play/ep86701"
            target="_blank"
          >
            <div class="second-bottom-2">
              <img
                src="images/picture/c047bbd0f0810f441198435c56361e17.jpeg"
                alt="秒速5厘米"
              />
            </div>
          </a>
          <a
            href="http://v.pptv.com/show/CtCtK5P5aacKiaPA.html?rcc_src=X1"
            target="_blank"
          >
            <div class="second-bottom-3">
              <img
                src="images/picture/0586649fd63d490f2d4399a39d8df73d.jpg"
                alt="龙猫"
              />
            </div>
          </a>
          <a
            href="http://v.pptv.com/show/icrt7ibWHHN3XYVpo.html?vfm=bdvtx&frp=v.baidu.com%2Fmovie_intro%2Fbrowse&kwid=26665"
            target="_blank"
          >
            <div class="second-bottom-4">
              <img
                src="images/picture/1197e33d9ef09b7d8f395bf9f863ca1c.jpg"
                alt="天空之城"
              />
            </div>
          </a>
          <a
            href="https://v.youku.com/v_show/id_XMjg5NTYxODM3Mg==.html"
            target="_blank"
          >
            <div class="second-bottom-5">
              <img
                src="images/picture/6308bd3ba40763a8408a60ab69395143.jpeg"
                alt="哈尔的移动城堡"
              />
            </div>
          </a>
        </div>
      </div>
      <div class="thirth" id="3">
        <div class="thirth-1">
          <p>动漫并非他国的专属，我们自己也拥有出色的作品</p>
        </div>
        <div class="thirth-2">
          <a
            href="https://www.iqiyi.com/v_19rrokztzc.html?vfm=2008_aldbd"
            target="_blank"
          >
            <div class="thirth-2-1">
              <img src="images/picture/dasheng.jpg" alt="大圣归来" />
              <p>大圣归来</p>
              <div class="thirth-2-text">
                <p>愿以我百年孤独，千难万阻，换取你来生安度，无忧如初</p>
              </div>
            </div>
          </a>
          <a
            href="https://www.iqiyi.com/v_19rrm3u1io.html?vfm=2008_aldbd"
            target="_blank"
          >
            <div class="thirth-2-2">
              <img src="images/picture/dayuhaitang.jpg" alt="大鱼海棠" />
              <p>大鱼海棠</p>
              <div class="thirth-2-text">
                <p>
                  人生是一场旅程， 我们经历了几次轮回，才换来这个旅程，
                  而这个旅程很短，因此不妨大胆一些， 不妨大胆一些去爱一个人，
                  去攀一座山，去追一个梦······
                </p>
              </div>
            </div>
          </a>
          <a
            href="https://so.youku.com/search_video/q_%E7%A7%A6%E6%97%B6%E6%98%8E%E6%9C%88?spm=a2hww.20023042.#qheader_search~10"
            target="_blank"
          >
            <div class="thirth-2-3">
              <img src="images/picture/qinshimingyue.jpg" alt="秦时明月" />
              <p>秦时明月</p>
              <div class="thirth-2-text">
                <p>利剑虽强却斩不断流水，微风虽弱却能平息海浪。</p>
              </div>
            </div>
          </a>
          <a
            href="https://www.bilibili.com/bangumi/play/ep63725"
            target="_blank"
          >
            <div class="thirth-2-4">
              <img
                src="images/picture/huyaoxiaohongniang.jpg"
                alt="狐妖小红娘"
              />
              <p>狐妖小红娘</p>
              <div class="thirth-2-text">
                <p>如果我们能活着出去的话，千山万水，你愿意陪我一起看吗？</p>
              </div>
            </div>
          </a>
        </div>
        <div class="thirth-3">
          <video
            src="http://upos-hz-mirrorkodo.acgvideo.com/upgcxcode/48/33/18543348/18543348-1-16.mp4?e=ig8euxZM2rNcNbR1nWdVhoMghz4VhwdEto8g5X10ugNcXBB_&deadline=1541942868&dynamic=1&gen=playurl&oi=3720514405&os=kodo&platform=html5&rate=119000&trid=c2f0774dc0d7424392c1801259907825&uipk=5&uipv=5&um_deadline=1541942868&um_sign=6fb6876e0375b84867cffdcec0dadef2&upsig=a5a1f2f379282ed0ddece294f6caafb1"
            controls
            width="100%"
            height="100%"
          ></video>
        </div>
        <div class="thirth-4"></div>
      </div>
      <div class="fourth" id="4">
        <div class="fourth-1">
          <div class="fourth-1-title"><p>热门推荐</p></div>
          <a
            href="https://www.bilibili.com/bangumi/play/ss25510"
            target="_blank"
          >
            <div class="fourth-1-1">
              <img
                src="images/picture/20171001_sy_225_15.jpg"
                alt="刀剑神域第三季"
              />
              <p>刀剑神域 Alicization</p>
            </div>
          </a>
          <a
            href="https://www.bilibili.com/bangumi/play/ss25617"
            target="_blank"
          >
            <div class="fourth-1-2">
              <img
                src="images/picture/20180609_ljt_220_4.jpg"
                alt="魔法禁书目录第三季"
              />
              <p>魔法禁书目录第三季</p>
            </div>
          </a>
          <a
            href="https://www.bilibili.com/bangumi/play/ep232407?from=search&seid=8196926748765169808"
            target="_blank"
          >
            <div class="fourth-1-3">
              <img
                src="images/picture/20180613_ljt_220_31.jpg"
                alt="杀戮天使"
              />
              <p>杀戮天使</p>
            </div>
          </a>
          <a
            href="https://www.bilibili.com/bangumi/play/ss25733"
            target="_blank"
          >
            <div class="fourth-1-4">
              <img
                src="images/picture/20180906_ljt_220_28.jpg"
                alt="青春猪头不会梦到兔女郎学姐"
              />
              <p>青春猪头少年不会梦到兔女郎学姐</p>
            </div>
          </a>
          <a
            href="https://www.iqiyi.com/v_19rr5a1lx4.html?vfm=m_303_qqll"
            target="_blank"
          >
            <div class="fourth-1-5">
              <img
                src="images/picture/20180906_ljt_220_10.jpg"
                alt="哥布林杀手"
              />
              <p>哥布林杀手</p>
            </div>
          </a>
          <a
            href="https://www.iqiyi.com/v_19rr5c08b8.html?vfm=m_303_qqll"
            target="_blank"
          >
            <div class="fourth-1-6">
              <img
                src="images/picture/20180331_ljt_220_13.jpg"
                alt="来自多彩世界的明天"
              />
              <p>来自多彩世界的明天</p>
            </div>
          </a>
        </div>
        <div class="fourth-2">
          <div class="fourth-2-title">
            <p>新番时间表</p>
            <div class="fourth-2-form"><p>资源均来自bilibili</p></div>
          </div>
          <div class="fourth-2-time">
            <div class="fourth-2-time-1">
              <span>周日</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25510"
                target="_blank"
              >
                <div class="fourth-2-time-text-1">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/d020b5afbb89d4945255fe643bc7557b1690e9ae.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>刀剑神域 Alicization</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss5978"
                target="_blank"
              >
                <div class="fourth-2-time-text-2">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/3121473d5dd03a9bcccb8490034207e724e731b3.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>博人传 火影忍者新时代</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-2">
              <span>周一</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25624"
                target="_blank"
              >
                <div class="fourth-2-time-text-3">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/7be07dc587ef3e8ad6f30287bd667230bf4c8b97.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>ANIMAYELL!</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25663"
                target="_blank"
              >
                <div class="fourth-2-time-text-4">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/4751b779d461ad7d5ecf4471ee82fb99912010c1.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>书店里的骷髅店员本田</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-3">
              <span>周二</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25739"
                target="_blank"
                ><div class="fourth-2-time-text-5">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/8d9f5b4a566d0547bc2e3f6f733b732a09c0d3d4.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>关于我转生变成史莱姆</p>
                </div></a
              >
              <a
                href="https://www.bilibili.com/bangumi/play/ss25623"
                target="_blank"
              >
                <div class="fourth-2-time-text-6">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/a18a214846a7b4e9b181e77103836bfe6094a115.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>偶像大师 SideM Mini</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-4">
              <span>周三</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25742"
                target="_blank"
              >
                <div class="fourth-2-time-text-7">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/73bef9f4c1dd05a6099394be180e1ffe26072266.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>强风吹拂</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25717"
                target="_blank"
              >
                <div class="fourth-2-time-text-8">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/a03037cfb87de39de33d423e090cc890d7e56429.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>我喜欢的是小说里的你</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-5">
              <span>周四</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25720"
                target="_blank"
              >
                <div class="fourth-2-time-text-9">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/78db5fb164553fc7a098d1bf3bb078c165feff43.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>叛逆性百万亚瑟王</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25615"
                target="_blank"
              >
                <div class="fourth-2-time-text-10">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/24fb6d80e5f8cadaddde930baf45cad924724047.png@90w_90h.webp"
                    alt=""
                  />
                  <p>魔偶马戏团</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-6">
              <span>周五</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25619"
                target="_blank"
              >
                <div class="fourth-2-time-text-11">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/c43ad384be240e192cd44f7c3fabb05160af6e94.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>邻家索菲</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25622"
                target="_blank"
              >
                <div class="fourth-2-time-text-12">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/a2e75351d69e63a6465424c9593657a93539c7bd.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>终将成为你</p>
                </div>
              </a>
            </div>
            <div class="fourth-2-time-7">
              <span>周六</span>
              <a
                href="https://www.bilibili.com/bangumi/play/ss23883"
                target="_blank"
              >
                <div class="fourth-2-time-text-13">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/443295f14b859de64a5917122bd9e516673c689d.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>暖暖日记 3rd</p>
                </div>
              </a>
              <a
                href="https://www.bilibili.com/bangumi/play/ss25740"
                target="_blank"
              >
                <div class="fourth-2-time-text-14">
                  <img
                    src="https://i0.hdslb.com/bfs/bangumi/535daa132b16493d2c2c7cae260b090fa48477a7.jpg@90w_90h.webp"
                    alt=""
                  />
                  <p>逆转裁判 第二季</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="fifth" id="5">
        <div class="fifth-1">
          <a
            href="https://game.bilibili.com/blhx/?spm_id_from=888.2994.MAv4z-6uzL.1"
            target="_blank"
          >
            <div class="fifth-1-1">
              <img
                src="http://static.biligame.com/blhx/gw/pc/img/logo.png?v=84534875.png"
                alt=""
              />
            </div>
          </a>
          <video
            src="http://static.biligame.com/blhx/gw/pc/img/bg.mp4?v=c19ac927.mp4"
            autoplay
            loop
          ></video>
          <div class="fifth-1-2">
            <img
              src="data:images/png;base64,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"
              alt=""
            />
            <p>扫码下载</p>
          </div>
        </div>
        <div class="fifth-2">
          <img
            src="http://static.biligame.com/fgo/img/header-161228.jpg?20180330"
            alt=""
          />
          <div class="fifth-2-1">
            <img
              src="https://static.biligame.com/fgo/img/qrcode-dl.png"
              alt=""
            />
            <p>扫码下载游戏</p>
          </div>
          <a href="https://www.biligame.com/detail/?id=49" target="_blank">
            <div class="fifth-2-2">
              <img
                src="http://static.biligame.com/fgo/img/icon-to-biligame.png?20180716%22"
                alt=""
              />
            </div>
          </a>
        </div>
        <div class="fifth-5">
          <div class="fifth-5-1"><p>推荐应用</p></div>
          <a href="https://app.bilibili.com/" target="_blank">
            <div class="fifth-5-2">
              <img src="images/picture/bili.png" alt="bilibili" />
              <p>bilibili</p>
            </div>
          </a>
          <a
            href="http://dl.static.iqiyi.com/hz/IQIYIsetup_z22.exe"
            target="_blank"
          >
            <div class="fifth-5-3">
              <img
                src="images/picture/5285906cfc0236559e1cafddc1c828a5.jpg"
                alt="爱奇艺"
              />
              <p>爱奇艺</p>
            </div>
          </a>
          <a
            href="http://dldir1.qq.com/qqtv/TencentVideo10.11.2585.0.exe"
            target="_blank"
          >
            <div class="fifth-5-4">
              <img
                src="images/picture/48867a65dacd1c89ed18e2eb0dcb5f37.png"
                alt="腾讯视频"
              />
              <p>腾讯视频</p>
            </div>
          </a>
          <a href="http://www.acfun.cn/app/" target="_blank">
            <div class="fifth-5-5">
              <img
                src="images/picture/c63ae1009620c69816e47c5d1545d200.jpg"
                alt="AcFun"
              />
              <p>AcFun</p>
            </div>
          </a>
        </div>
      </div>
      <div id="music"><audio src="" id="bymusic"></audio></div>
    </div>
  </body>
  <script src="js/main-yu.js" type="text/javascript"></script>
  <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script>
    // 滚动窗口
    $(function() {
      //页面加载完毕才执行

      //=========设置参数==========
      //图片统一高度：
      var images_height = "100vh";
      //图片路径/链接(数组形式):
      var images_url = [
        "images/picture/27e8f7feb10e8d9edc107e05be7e3973cad1a8d4.png",
        "images/picture/o_1c9ba1eune521d3fgga1dvm1pbo3k.jpg",
        "images/picture/TIM图片20181128195613.png",
        "images/picture/illust_69065999_20180616_150809.png",
        "images/picture/4fedf08fcfb9650b37d87a3fe8119573.jpeg"
      ];
      var images_count = images_url.length;
      //console.log(images_count);

      //创建节点
      //图片列表节点
      for (var j = 0; j < images_count + 1; j++) {
        $(".banner ul").append("<li></li>");
      }
      //轮播圆点按钮节点
      for (var j = 0; j < images_count; j++) {
        if (j == 0) {
          $(".banner ol").append('<li class="current"></li>');
        } else {
          $(".banner ol").append("<li></li>");
        }
      }

      //载入图片
      $(".banner ul li").css("background-image", "url(" + images_url[0] + ")");
      $.each(images_url, function(key, value) {
        $(".banner ul li")
          .eq(key)
          .css("background-image", "url(" + value + ")");
      });

      $(".banner").css("height", images_height);

      $(".banner ul").css("width", (images_count + 1) * 100 + "%");

      $(".banner ol").css("width", images_count * 20 + "px");
      $(".banner ol").css("margin-left", -images_count * 20 * 0.5 - 10 + "px");

      //=========================

      var num = 0;
      //获取窗口宽度
      var window_width = $(window).width();
      $(window).resize(function() {
        window_width = $(window).width();
        $(".banner ul li").css({ width: window_width });
        clearInterval(timer);
        nextPlay();
        timer = setInterval(nextPlay, 3000);
      });
      //console.log(window_width);
      $(".banner ul li").width(window_width);
      //轮播圆点
      $(".banner ol li").mouseover(function() {
        //用hover的话会有两个事件(鼠标进入和离开)
        $(this)
          .addClass("current")
          .siblings()
          .removeClass("current");
        //第一张图： 0 * window_width
        //第二张图： 1 * window_width
        //第三张图： 2 * window_width
        //获取当前编号
        var i = $(this).index();
        //console.log(i);
        $(".banner ul")
          .stop()
          .animate({ left: -i * window_width }, 500);
        num = i;
      });
      //自动播放
      var timer = null;
      function prevPlay() {
        num--;
        if (num < 0) {
          //悄悄把图片跳到最后一张图(复制页,与第一张图相同),然后做出图片播放动画，left参数是定位而不是移动的长度
          $(".banner ul")
            .css({ left: -window_width * images_count })
            .stop()
            .animate({ left: -window_width * (images_count - 1) }, 500);
          num = images_count - 1;
        } else {
          //console.log(num);
          $(".banner ul")
            .stop()
            .animate({ left: -num * window_width }, 500);
        }
        if (num == images_count - 1) {
          $(".banner ol li")
            .eq(images_count - 1)
            .addClass("current")
            .siblings()
            .removeClass("current");
        } else {
          $(".banner ol li")
            .eq(num)
            .addClass("current")
            .siblings()
            .removeClass("current");
        }
      }
      function nextPlay() {
        num++;
        if (num > images_count) {
          //播放到最后一张(复制页)后,悄悄地把图片跳到第一张,因为和第一张相同,所以难以发觉,
          $(".banner ul")
            .css({ left: 0 })
            .stop()
            .animate({ left: -window_width }, 500);
          //css({left:0})是直接悄悄改变位置，animate({left:-window_width},500)是做出移动动画
          //随后要把指针指向第二张图片,表示已经播放至第二张了。
          num = 1;
        } else {
          //在最后面加入一张和第一张相同的图片，如果播放到最后一张，继续往下播，悄悄回到第一张(肉眼看不见)，从第一张播放到第二张
          //console.log(num);
          $(".banner ul")
            .stop()
            .animate({ left: -num * window_width }, 500);
        }
        if (num == images_count) {
          $(".banner ol li")
            .eq(0)
            .addClass("current")
            .siblings()
            .removeClass("current");
        } else {
          $(".banner ol li")
            .eq(num)
            .addClass("current")
            .siblings()
            .removeClass("current");
        }
      }
      timer = setInterval(nextPlay, 4000);
      //鼠标经过banner，停止定时器,离开则继续播放
      $(".banner")
        .mouseenter(function() {
          clearInterval(timer);
          //左右箭头显示(淡入)
          $(".banner i").fadeIn();
        })
        .mouseleave(function() {
          timer = setInterval(nextPlay, 4000);
          //左右箭头隐藏(淡出)
          $(".banner i").fadeOut();
        });
      //播放下一张
      $(".banner .right").click(function() {
        nextPlay();
      });
      //返回上一张
      $(".banner .left").click(function() {
        prevPlay();
      });
    });
  </script>
</html>
